<template>
	<view class="category">
		<!-- 自定义头部 -->
		<view class="header-top-box">
			<view class="header-top fff flexbetween">
				<view class="top-image" @click="gotoBack()"></view>
				<view class="tab">商品类别</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="center">
			<!-- 全选 -->
			<view class="all">
				<view class="allimage">
					<image src="../../../static/image/system/Vector.png" mode=""></image>
				</view>
				<view class="alltext">
					全选
				</view>
			</view>
			<!-- 选择内容 -->
			<view class="centertext">
				<!-- 一级 -->
				<view class="onetext">
					<!-- 点击全部收起/ -->
					<view @click="clickput('all')">
					<view class="textimg">
						<image src="../../../static/image/system/Vectorkong.png"></image>
					</view>
					<view class="text">
						配料
					</view>
					<view class="right">
						<image :src="imgone" mode=""></image>
					</view>
					</view>
					<!-- 二级 -->
					<view :class="classone">
						<!-- 点击三级收 -->
						<view @click="clickput('put3')">

						<view class="text2">
							汽水
						</view>
						<view class="right">
							<image :src="imgtwo" mode=""></image>
						</view>
						</view>
						<!-- 三级 -->
						<view :class="classtwo">
							<view class="threeimg">
								<image src="../../../static/image/system/Vector.png" mode=""></image>
							</view>
							<view class="threetext">
								巴奴
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<view class="footer">
			<view class="quedingbtn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 点击一级
				isone:true,
				imgone:'../../../static/image/system/Frame1.png',
				classone:'two dis',
				// 点击二级
				istwo:true,
				imgtwo:'../../../static/image/system/Frame1.png',
				classtwo:'three dis'
			}
		},
		methods: {
			// 返回上一页
			gotoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickput(v){
				if(v =='put3'){
					this.istwo = !this.istwo
					this.istwo ? this.classtwo = "three dis" : this.classtwo = 'three'
					this.istwo ? this.imgtwo = '../../../static/image/system/Framebt.png' : this.imgtwo = '../../../static/image/system/Frame1.png'
				}
				
				
				
				
				if(v=='all'){
					this.isone = !this.isone
					this.istwo = false
					this.classtwo = 'three dis'
					this.isone ? this.classone = "two dis" : this.classone = 'two'
					this.isone ? this.imgone = '../../../static/image/system/Framebt.png' : this.imgone = '../../../static/image/system/Frame1.png'
				}
	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quedingbtn{
		
		width: 100%;
		height: 82rpx;
		background: linear-gradient(273deg, #0BBDCB 0%, #41D4E2 100%);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		justify-content: center;
	}
	.footer{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 30rpx 30rpx 60rpx;
	}
	// 公用隐藏
	.dis{
		display: none;
	}
	// 顶部自定义
	.header-top-box {
		height: 170rpx;
		width: 100%;
	}

	.header-top {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		padding: 96rpx 40rpx 10rpx;
	}

	.top-image {
		margin-top: 20rpx;
		width: 20rpx;
		height: 38rpx;
		background: url('@/static/image/system/return.png') no-repeat;
		background-size: 20rpx 38rpx;
	}

	.tab {
		margin: 0 auto;
		font-weight: bold;
	}

	.center {
		margin-top: 10rpx;
		width: 100%;
		height: calc(100vh - 300rpx);
		background-color: #f7f7f7;

		.all {
			width: 100%;
			height: 90rpx;

			.allimage {
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
				display: inline-block;
				transform: translateY(5rpx);

				// border: 1px solid black;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.alltext {
				display: inline-block;
				line-height: 90rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}

		.centertext {
			width: 100%;
			height: 222px;
			background-color: #fff;

			.onetext {
				width: 100%;
				height: 90rpx;

				.textimg {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
					display: inline-block;
					transform: translateY(5rpx);

					// border: 1px solid black;
					image {
						width: 100%;
						height: 100%;
					}

				}

				.text {
					display: inline-block;
					line-height: 90rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
				.right{
					width: 30rpx;
					height: 30rpx;
					margin-right: 30rpx;
					display: inline-block;
					transform: translateY(5rpx);
					float: right;
					margin-top: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.two{
		// border: 1px solid black;
		.text2{
			display: inline-block;
			line-height: 90rpx;
			font-weight: bold;
			margin-left: 75rpx;
		}
	}
	.three{
		// border: 1px solid black;
		.threeimg {
			width: 30rpx;
			height: 30rpx;
			margin-left: 75rpx;
			display: inline-block;
			transform: translateY(5rpx);
			image {
				width: 100%;
				height: 100%;
			}
			}
		.threetext{
			display: inline-block;
			line-height: 90rpx;
			font-weight: bold;
			margin-left: 20rpx;
		}
	
	}
	
</style>
